<template>
	<view class="content">
		
		<!-- f1 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="item in carousels" :key="item.id">
				<view class="swiper-item">
					<image :src="base+item.pic" mode="widthFix" @click="jump(item.href)"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- f2 宫格模块 -->
		<view class="func-card">
			<uni-grid :column="4"  :showBorder="false">
				<uni-grid-item v-for="item in menuItems">
					<view class="card-item" @click="jump(item.href)">
						<image :src="base+item.pic" mode="widthFix"></image>
						<text class="text">{{item.title}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<!-- f3 商业服务 -->
		<uni-card class="card"  title="| 商业服务" :is-full="true">
			<view class="service">
				<!--左侧：房屋租售-->
				<view class="service-item">
					<view class="txt">
						<text>房屋租售</text>
						<view>
							<navigator>租房</navigator>
							<navigator>短租</navigator>
						</view>
					</view>
					<!--mode="scaleToFill" 不保持原始宽高比，缩放图片填满指定宽高-->
					<image class="img" src="../../static/img/chuzu.png" 
						mode="scaleToFill"></image>
				</view>
				<!--右侧：便民服务-->
				<view class="service-item">
					<view class="txt">
							<text>便民服务</text>
							<view>
								<navigator>便利店</navigator>
								<navigator>超市</navigator>
							</view>
						</view>
						<image class="img"  src="../../static/img/bianmin.png"
							mode="scaleToFill"></image>
				</view>
			</view>
		</uni-card>
		
		<!--f4:社区活动-->
		<uni-card class="card" title="| 社区活动" :is-full="true" padding="0">
			<uni-list>
				<uni-list-item class="activity-item" v-for="item in activities" :key="item.aid">
					<template v-slot:body>
						<view class="activity-body">
							<text class="title">{{item.title}}</text>
							<text class="content">{{item.content}}</text>
							<text class="time">{{item.startTime | dateToStr}}</text>
						</view>
					</template>
					<template v-slot:footer>
						<image class="pic" :src="base + item.pic" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
		
	</view>
</template>

<script>
	import {indexData,base} from '../../service/index.js'
	export default {
		data() {
			return {
				base,
				carousels:[],
				menuItems:[],
				activities:[]
			}
		},
		async onLoad() {//生命周期函数，在页面加载后自动触发，一个页面创建后只执行一次
			//--显示 欢迎吐司信息
			uni.showToast({
				title:"欢迎回来!",
				icon:'none',
				duration:2000
			})	
			//--ajax加载主页数据
			let data = await indexData()
			console.log(data)
			this.carousels = data.carousels
			this.menuItems = data.menuItems
			this.activities = data.activities
		},
		methods: {
			// 点击轮播图跳转到广告页
			jump(url){
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style lang="scss" scoped>
		.swiper{
			height: 300rpx;
			.swiper-item > image{
				width: 750rpx;
			}
		}
		
		.func-card{
			background-color: $uni-bg-color;
			margin-top: $uni-spacing-col-lg;
			.card-item{
				height: 100%;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				>image{
					width: 35%;
				}
			}
		}
		
		.service{
			width: 100%;
			.service-item{
				justify-content: space-between;
				align-items: center;
				//弹性子元素尺寸增长权重：1
				flex:1;
				//设置内边距
				padding: $uni-spacing-col-sm $uni-spacing-row-sm;
				//图片强制宽高
				.img{
					width: 150rpx;
					height: 120rpx;
				}
				//文字设置
				.txt{
					font-size: $uni-font-size-sm;
					flex-direction: column;
					flex:1;
					//导航器设置
					navigator{
						margin-right: $uni-spacing-row-sm;
					}
				}
			}
		}

	.activity-item{
		align-items: center;
		.activity-body{
			flex-direction: column;
			width:420rpx;
			.title{
				font-size: $uni-font-size-base;
				font-weight: bold;
				@include ellipsis-1;
			}
			.content{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				@include ellipsis-1;
			}
			.time{
				font-size: $uni-font-size-sm;
				color:$uni-text-color-grey;
			}
		}
		.pic{
			width: 240rpx;
		}
	}
</style>